<template>
  <!-- 积分明细 -->
  <u-dialog :title="title" :show.sync="show" width="1040px" :auto-close="false" :footer="false" @cancel="cancel" @confirm="confirm">
    <u-table
      row-key="index"
      :data="list"
      :loading="listLoading"
      :options="listOptions"
      :columns="columns"
      :pagination.sync="listQuery"
      :fetch="handleCreditList"
    />
  </u-dialog>

</template>

<script>
/**
 * 业务组件 - 积分明细
 */
export default {
  name: 'CreditDetaile',
  model: {
    prop: 'show',
    event: 'changeShow'
  },
  props: {
    /** 是否弹框 */
    show: {
      type: Boolean,
      default: false
    },
    /** 选中的数据 */
    data: {
      type: Object,
      default: data => {
        return ({
          card_id: '',
          member_name: ''
        })
      }
    }
  },
  data() {
    return {
      api: this.$u.api.Member,
      // 表格
      columns: [
        {
          prop: 'proc_date',
          label: '时间',
          width: '150'
        },
        {
          prop: 'digest',
          label: '备注',
          width: '120'
        },
        {
          prop: 'benefit_change_amo',
          label: '积分',
          render: (h, params) => {
            const credit = params.row.benefit_change_amo
            if (credit > 0) {
              return h('el-tag', { props: { type: 'success' }}, '+' + credit)
            } else {
              return h('el-tag', { props: { type: 'danger' }}, credit)
            }
          }
        },
        {
          prop: 'oper_pern',
          label: '操作人',
          width: '150'
        }
      ],
      list: [],
      // 加载数据加载状态
      listLoading: false,
      listOptions: {
        index: true,
        mutiSelect: false,
        stripe: true
      },
      listQuery: {
        page: 1,
        pageSize: 10,
        totalCount: 1,
        card_id: ''
      },
      title: '积分明细'
    }
  },
  watch: {
    show(newVal, oldVal) {
      // 监听是否弹框,决定是否初始化数据
      // console.log(newVal + '---------------' + oldVal)
      if (newVal) {
        let { card_id, member_name } = this.data
        if (card_id === null || card_id === undefined) {
          card_id = ''
          member_name = ''
        }
        this.listQuery.card_id = card_id
        this.title = '积分明细:查询【' + member_name + '】'
        this.handleCreditList()
      }
    }
  },
  methods: {
    // 获取列表数据
    handleCreditList() {
      const self = this
      // 打开加载状态
      self.listLoading = true
      // 查询分页数据
      self.api.creditList(self.listQuery).then(res => {
        // 获取分页列表数据
        self.list = res.data.list
        // 获取分页数据,总页数
        self.listQuery.totalCount = res.data.totalCount

        // fix:修复ID重复的问题,设置table表格key值必须唯一
        self.list.forEach((item, index) => {
          self.list[index].index = index
        })
        // 关闭加载状态
        setTimeout(() => {
          self.listLoading = false
        }, 0.5 * 1000)
      })
    },
    // 确认
    confirm() {
      this.$emit('confirm')
    },
    // 关闭或者取消
    cancel() {
      this.$emit('changeShow', false)
      this.$emit('cancel')
    }
  }
}
</script>

<style scoped>

</style>
